<template>
    <div
        :style="{
            width: detail.style.position.w + 'px',
            height: detail.style.position.h + 'px',
            background: this.detail.style.backColor,
        }"
        class="tableClass"
    >
        <div >

            <el-table  v-loading="loading" :data="SNMPList"
                       :cell-style="{background: this.detail.style.backColor,color: this.detail.style.foreColor}"
                       :row-style="{background: this.detail.style.backColor,color: this.detail.style.foreColor}"
                       :header-cell-style="{background: this.detail.style.backColor,color: this.detail.style.foreColor}">
                <el-table-column align="center" label="序号" type="index" />
                <el-table-column align="center" label="设备地址" prop="peerAddress" />
                <el-table-column align="center" label="oidName" prop="oidName" />
                <el-table-column align="center" label="响应的值" prop="variable" />
                <el-table-column align="center" label="响应时间" prop="createTime" />
            </el-table>
        </div>
        <Pagination
            v-show="false"
            :limit.sync="queryParams.pageSize"
            :page.sync="queryParams.pageNum"
            :style="{ background: this.detail.style.backColor, color: this.detail.style.foreColor }"
            :total="total"
            @pagination="getList"
        />
    </div>
</template>

<script>
import BaseView from './View';
import request from '@/utils/request';

export default {
    name: 'view-snmp',
    extends: BaseView,
    data() {
        return {
            // 遮罩层
            loading: false,
            // 总条数
            total: 0,
            // SNMP协议响应数据
            SNMPList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        /** 查询SNMP协议响应数据列表 */
        getList() {
            this.loading = true;
            let url = '/data/response/list';
            request({
                url: url,
                method: 'get',
                params: this.queryParams,
            }).then((res) => {
                this.SNMPList = res.rows;
                this.total = res.total;
                this.loading = false;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
</style>
